<template>
  <div id="index" ref="appRef">
    <div class="bg">
      <dv-loading v-if="loading">Loading...</dv-loading>
      <div v-else class="host-body">
        <div class="d-flex jc-center">
          <dv-decoration-10 class="dv-dec-10" />
          <div class="d-flex jc-center">
            <dv-decoration-8 class="dv-dec-8" :color="['#568aea', '#000000']" />
            <div class="title">
              <span class="title-text">福建疫情数据可视化平台</span>
              <dv-decoration-6
                class="dv-dec-6"
                :reverse="true"
                :color="['#50e3c2', '#67a1e5']"
              />
            </div>
            <dv-decoration-8
              class="dv-dec-8"
              :reverse="true"
              :color="['#568aea', '#000000']"
            />
          </div>
          <dv-decoration-10 class="dv-dec-10-s" />
        </div>

        <!-- 第二行 -->
        <div class="d-flex jc-between px-2">
          <div class="d-flex aside-width">
            <div class="react-left ml-4 react-l-s">
              <span class="react-before"></span>
              <span class="text">总体概览</span>
            </div>
            <div class="react-right ml-3">
<!--              <span class="text">市级地图</span>-->
            </div>
          </div>
          <div class="d-flex aside-width">
            <div class="react-right bg-color-blue mr-3">
              <span class="text fw-b">闽江学院</span>
            </div>
            <div class="react-right mr-4 react-l-s">
              <span class="react-after"></span>
<!--              <span class="text" @click="dateClicked"-->
<!--                >{{ dateYear }} {{ dateWeek }} {{ dateDay }}</span-->
<!--              >-->
<!--            todo  日期选择器的样式还需调整-->
              <el-date-picker
                  class="text"
                  size="mini"
                  v-model="selectedDate"
                  type="date"
                  :placeholder="datePlaceholder"
                  @change="dateChange"
              >
              </el-date-picker>
            </div>
          </div>
        </div>

        <div class="body-box">
          <!-- 第三行数据 -->
          <div class="content-box">
            <!-- 这里的content-box是表格布局样式，当地图的高度变长了，整行表格的高度也会变 -->
            <div>
              <!--数据概览-->
              <dv-border-box-12 style="width: 385px">
                <center :is-history="isHistoryObj"/>
              </dv-border-box-12>
            </div>
            <div>
              <!--雷达图、分析报告-->
              <dv-border-box-13>
                <centerLeft1 :is-history="isHistoryObj" />
              </dv-border-box-13>
            </div>
            <div>
<!--              福建地图-->
              <dv-border-box-12 style="width: 600px">
                <dv-border-box-12>
                  <centerLeft2 :is-history="isHistoryObj"/>
                </dv-border-box-12>
<!--                <centerLeft1 />-->
              </dv-border-box-12>
            </div>
            <div>
<!--              <center />-->
<!--              市级地图-->
              <dv-border-box-13>
                <fuzhou :is-history="isHistoryObj" />
              </dv-border-box-13>
            </div>


          </div>

          <!-- 第四行数据 -->
          <div class="bototm-box">
            <dv-border-box-13>
              <bottomLeft :is-history="isHistoryObj"/>
            </dv-border-box-13>
            <dv-border-box-12>
              <bottomRight :is-history="isHistoryObj"/>
            </dv-border-box-12>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import drawMixin from "../utils/drawMixin";
import { formatTime } from '../utils'
import centerLeft1 from './radar.vue'
import centerLeft2 from './centerLeft2.vue'
import center from './center.vue'
import bottomLeft from './bottomLeft.vue'
import bottomRight from './bottomRight.vue'
import fuzhou from './fuzhou.vue'
import SockJS from 'sockjs-client';
import Stomp from 'stompjs';

export default {
  mixins: [ drawMixin ],
  data() {
    return {
      isHistoryMode: false,
      selectedDate: '',
      isHistoryObj: {},
      timing: null,
      loading: true,
      dateDay: null,
      dateYear: null,
      dateWeek: null,
      weekday: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
    }
  },
  components: {
    centerLeft1,
    centerLeft2,
    // centerRight2,
    center,
    bottomLeft,
    bottomRight,
    fuzhou
  },
  mounted() {
    this.timeFn()
    this.cancelLoading()
    this.init();
  },
  beforeDestroy () {
    clearInterval(this.timing)
  },
  computed:{
    datePlaceholder(){
      return this.dateYear + "-" + this.dateDay //弃用周几，太多了，placeholder放不下
    }
  },
  methods: {
    dateChange(){
      if (formatTime(new Date(), 'yyyy-MM-dd') !== formatTime(this.selectedDate,"yyyy-MM-dd")){
        if (this.selectedDate !== ""){
          //关闭websocket
          this.$store.commit('closeWs')
          //通知其他组件使用http请求获取往期数据。（可以给每个图表组件设一个属性，来判断当前是不是历史模式）
          this.httpGetData(formatTime(this.selectedDate,"yyyy-MM-dd"))
        }
      }
    },

    httpGetData(newDate){
      this.isHistoryObj = {
        date: newDate,
        isHistoryMode: true
      }
    },

    init() {
      //连接websocket
      let socket = new SockJS('http://localhost:8081/ws');
      let stompClient = Stomp.over(socket);
      stompClient.debug = null //关闭websocket的控制台打印
      // console.log("刚创建的客户端=》",stompClient)
      stompClient.connect({
        login: this.$store.state.loginModule.currentUser.username,//websocket的登录没走security,感觉这里的参数可以是username-password格式的。这里传什么参数，websocket就会用什么链接
      })
      this.$store.commit('updateWs',stompClient)
    },
    timeFn() {
        this.timing = setInterval(() => {
          if (!this.isHistoryMode){
            this.dateDay = formatTime(new Date(), 'HH: mm: ss')
            this.dateYear = formatTime(new Date(), 'yyyy-MM-dd')
            this.dateWeek = this.weekday[new Date().getDay()]
          }

        }, 1000)//每一秒重新设置一下时间
    },
    cancelLoading() {
      setTimeout(() => {
        this.loading = false
      }, 500)
    }
  }
}
</script>

<style lang="scss">
@import '../assets/scss/index.scss';
</style>
